<template>
  <div>
    <div>
      <el-table v-loading="dataListLoading" :data="data" border class="layout-table" style="width: 100%; height: 400px">
        <el-table-column type="selection" header-align="center" align="center" width="50" />
        <el-table-column prop="cmdName" label="开始时间" dict-type="alarm_type"></el-table-column>
        <el-table-column prop="occurTime" label="结束时间" dict-type="order_status"></el-table-column>
        <el-table-column prop="occurNum" label="时长" header-align="center" align="center" />
        <el-table-column prop="occurTime" label="开始里程" header-align="center" align="center" />x
        <el-table-column prop="endTime" label="结束里程" header-align="center" align="center" />
        <el-table-column prop="occurNum" label="行驶里程" header-align="center" align="center" />
        <el-table-column prop="occurTime" label="平均速度" header-align="center" align="center" />
        <el-table-column prop="occurTime" label="最大速度" header-align="center" align="center" />x
        <el-table-column prop="endTime" label="开始地址" header-align="center" align="center" />
        <el-table-column prop="occurNum" label="结束地址" header-align="center" align="center" />
      </el-table>
    </div>
<!--    <div class="bottom">-->
<!--      <div style="height: 100%; width: 50%">-->
<!--        <RealTimeTrack ref="trackRef"></RealTimeTrack>-->
<!--      </div>-->
<!--      <div id="myChart123" style="height: 100%; width: 50%"></div>-->
<!--    </div>-->
  </div>
  <!--        <el-pagination-->
  <!--            :current-page="state.page"-->
  <!--            :page-sizes="state.pageSizes"-->
  <!--            :page-size="state.limit"-->
  <!--            :total="state.total"-->
  <!--            layout="total, sizes, prev, pager, next"-->
  <!--            @size-change="sizeChangeHandle"-->
  <!--            @current-change="currentChangeHandle">-->
  <!--        </el-pagination>-->
</template>

<script setup lang="ts">
import { useCrud } from '@/hooks'
import { reactive, ref, watch } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import { useRoute } from 'vue-router'
import { getDetailsApi } from '@/api/statistics/driving/details'
import * as echarts from 'echarts'
import { onMounted } from 'vue'
import RealTimeTrack from '@/components/map-realTime-track/realTimeTrack.vue'
const route = useRoute()
const data = ref()
const dataListLoading = ref(true)
// const queryForm = ref({
//   id: route.query.userId
// })

getDetails()

function getDetails() {
  dataListLoading.value = false
  // getDetailsApi(queryForm.value.id).then((res) => {
  //   data.value = res
  //   dataListLoading.value = false
  // })
  if (route.query){
    data.value = route.query
  }
}
// onMounted(() => {
//   // 需要获取到element,所以是onMounted的Hook
//   let myChart = echarts.init(document.getElementById('myChart123'))
//   // 绘制图表
//   myChart.setOption({
//     // title: {
//     //   text: 'Stacked Line'
//     // },
//     tooltip: {
//       trigger: 'axis'
//     },
//     legend: {
//       data: ['速度', '里程（km）', '行驶油量', '非行驶油量', '油量1', '油量2', '油量3', '油量4'],
//       selected: {
//         速度: true,
//         '里程(km)': true,
//         行驶油量: true,
//         非行驶油量: true,
//         油量1: false,
//         油量2: false,
//         油量3: false,
//         油量4: false
//       }
//     },
//     grid: {
//       left: '3%',
//       right: '4%',
//       bottom: '3%',
//       containLabel: true
//     },
//     toolbox: {
//       feature: {
//         saveAsImage: {}
//       }
//     },
//     xAxis: {
//       type: 'category',
//       boundaryGap: false,
//       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
//     },
//     yAxis: {
//       type: 'value'
//     },
//     series: [
//       {
//         name: '速度',
//         type: 'line',
//         stack: 'Total',
//         data: [320, 332, 301, 334, 390, 330, 320]
//       },
//       {
//         name: '里程(km)',
//         type: 'line',
//         stack: 'Total',
//         data: [820, 932, 901, 934, 1290, 1330, 1320]
//       },
//       {
//         name: '行驶油量',
//         type: 'line',
//         stack: 'Total',
//         data: [820, 932, 901, 934, 1290, 1330, 1320]
//       },
//       {
//         name: '非行驶油量',
//         type: 'line',
//         stack: 'Total',
//         data: [820, 932, 901, 934, 1290, 1330, 1320]
//       },
//       {
//         name: '油量1',
//         type: 'line',
//         stack: 'Total',
//         data: [820, 932, 901, 934, 1290, 1330, 1320]
//       },
//       {
//         name: '油量2',
//         type: 'line',
//         stack: 'Total',
//         data: [820, 932, 901, 934, 1290, 1330, 1320]
//       },
//       {
//         name: '油量3',
//         type: 'line',
//         stack: 'Total',
//         data: [820, 932, 901, 934, 1290, 1330, 1320]
//       },
//       {
//         name: '油量4',
//         type: 'line',
//         stack: 'Total',
//         data: [820, 932, 901, 934, 1290, 1330, 1320]
//       }
//     ]
//   })
//   window.onresize = function () {
//     // 自适应大小
//     myChart.resize()
//   }
// })
</script>
<style>
.hide {
  width: 200px;
  overflow: hidden;
  word-wrap: break-word;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.bottom {
  margin: 10px 0;
  width: 100%;
  height: 500px;
  display: flex;
  //flex-wrap: nowrap;
}
</style>
